async function defineComponentProps() {
    let compId;
    try {
        compId = VueElement.id;
    } catch (e) {
        compId = "map2";
    }

    TempSources.compId = compId;
    TempSources.timer = null;
    TempSources.geoJson = null;
    TempSources.actions = [
        "click",
        "dblclick",
        "mousedown",
        // "mousemove",
        "mouseup",
        // "mouseover",
        "mouseout",
        "globalout",
        // "contextmenu",
    ];
    //TempSources.mapDataRender = [];

    const componentProps = {
        mapInfo: {
            "dataType": 1,
            "mapName": "广州市",
            "url": "",
            "mapCode": "440100"
        },

        "interval": 2000,
        "thresholdType": 'interval',
        "thresholdField": 'judge',
        "thresholdLimit": 'limit',
        "thresholdEnable": true,
        "thresholdData": [
            {
                max: 10,
                min: 0,
                color: 'rgb(255,0,0)'
            },
            {
                max: 20,
                min: 11,
                color: 'rgb(255,255,0)'
            },
            {
                max: 30,
                min: 21,
                color: 'rgb(0,0,211)'
            }
        ],


        "tooltipEnable": true,
        "tooltipImageBg": true,
        "tooltipBgColor": 'rgba(23, 189, 237, 0.5)',
        "tooltipFontSize": 16,
        "tooltipData": [
            {
                "name": "天河区",
                "text1": "上传条数:20671条",
                "text2": "销售码洋:73.8万元",
                "text3": "库存码洋:1579.5万元",
                "judge": 10
            },
            {
                "name": "海珠区",
                "text1": "上传条数:500000条",
                "text2": "销售码洋:155855万元",
                "text3": "库存码洋:999999万元",
                "judge": 25
            }
        ],
        "tooltipFontColor": "rgb(255,255,255)",
    };
    let option = {
        backgroundColor: "",
        legend: {
            show: false,
        },
        series: [
            {
                tooltip: {
                    show: true,
                    padding: [6, 10],
                    backgroundColor: "rgba(255,255,255,.8)",
                    borderColor: "#fff",
                    borderRadius: "10px",
                    textStyle: {
                        align: "left",
                        verticalAlign: "middle",
                        lineHeight: 26,
                        color: "rgba(0,0,0,.7)",
                    },
                },
                name: "数据",
                type: "map",
                map: TempSources.compId, // 自定义扩展图表类型
                aspectScale: 1,
                zoom: 0.6, //缩放
                showLegendSymbol: false,
                label: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    fontSize: 10,
                },
                itemStyle: {
                    areaColor: "rgba(14,149,241,1)",
                    borderColor: "rgba(233,233,233,1)",
                    borderWidth: 1,
                    shadowColor: "rgba(14,149,241,1)",
                    shadowBlur: 20,
                },
                emphasis: {
                    label: {
                        show: true,
                        color: "rgba(255,255,255,1)",
                        fontSize: 10,
                    },
                    itemStyle: {
                        areaColor: "rgba(255,240,64,1)",
                        borderColor: "rgba(255,255,255,1)",
                        borderWidth: 1,
                    },
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: "160%",
                markPoint: {
                    symbol: "none",
                },
            },
        ],
    };

    componentProps.options = option;
    // 返回组件属性, 一定要return
    return componentProps;
}

async function defineComponentBeforeCreated({ VueElement }) {

    if (VueElement && VueElement.component.props.mapInfo.json) {
        let mapJson = VueElement.component.props.mapInfo.json
        TempSources.geoJson = mapJson;
    } else {
        let mapUrl = COMP_DIR + "/map/guangzhou.geojson";
        let getMapJson = function () {
            return fetch(mapUrl).then((res) => res.json());
        };
        TempSources.geoJson = await getMapJson();
    }
    echarts.registerMap(TempSources.compId, TempSources.geoJson);
}

// 组件创建后
async function defineComponentCreated({ VueElement, VueInstance }) {
    if (VueElement && VueInstance) {
        if (TempSources.compId) {
            echarts.registerMap(TempSources.compId, TempSources.geoJson);
            VueInstance.options.series[0].map = TempSources.compId;
        } else {
            echarts.registerMap(TempSources.compId, TempSources.geoJson);
        }

        const myChart = VueInstance.getEChartInstance();
        function registerEvents(actions) {
            actions.forEach((action) => {
                myChart.on(action, function (params) {
                    let paramsData = params.data === undefined ? params.name : params.data;
                    EventPublisher.publish("map_event", {
                        mapType: "echartsMap",
                        mapid: TempSources.compId,
                        action,
                        data: paramsData,
                    });
                    if (action === "click") {
                    }
                });
            });
        }
        registerEvents(TempSources.actions);
    }


}

async function defineComponentDestroy() {
    if (TempSources.timer) {
        clearInterval(TempSources.timer);
    }
}

async function handleDataCallback({ ResourceData, VueInstance }) {
    if (VueInstance) {
        let mapGeoJsonData = ResourceData;
        echarts.registerMap(VueInstance.options.series[0].map, mapGeoJsonData);
        VueInstance.updateOptions(VueInstance.options);
    }
}
